<template>
  <a-layout>
    <a-layout-content
      :style="{
        background: '#fff',
        padding: '24px',
        margin: 0,
        minHeight: '280px',
      }"
    >
      <p>
        <a-form layout="inline" :model="param">
          <a-form-item>
            <a-button type="primary" @click="add()"> 新增 </a-button>
          </a-form-item>
        </a-form>
      </p>
      <a-table
        :columns="columns"
        :row-key="(record) => record.id"
        :data-source="ebooks"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'cover'">
            <a-image
              :src="record.cover"
              alt="图片加载失败"
              style="width: 80px; height: 80px"
            />
          </template>

          <template v-if="column.dataIndex === 'action'">
            <a-space size="small">
              <a-button type="primary">
                <router-link
                  :to="{ path: '/admin/doc', query: { ebookId: record.id } }"
                  >文档管理</router-link
                >
              </a-button>
              <a-button type="primary" @click="edit(record)"> 编辑 </a-button>
              <a-popconfirm
                title="删除后不可以恢复，确认删除?"
                ok-text="是"
                cancel-text="否"
                @confirm="handleDelete(record.id)"
              >
                <a-button type="danger"> 删除 </a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>

     
    </a-layout-content>
  </a-layout>

  <div>
    <a-modal
      title="电子书表单"
      v-model:visible="modalVisible"
      :confirm-loading="modalLoading"
      @ok="handleModalOk"
    >
      <a-form
        :model="ebook"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-item label="封面">
          <a-input v-model:value="ebook.cover" />
        </a-form-item>
        <a-form-item label="名称">
          <a-input v-model:value="ebook.name" />
        </a-form-item>
        <a-form-item label="分类一">
          <a-input v-model:value="ebook.category1Id" />
        </a-form-item>
        <a-form-item label="分类二">
          <a-input v-model:value="ebook.category2Id" />
        </a-form-item>
        <a-form-item label="描述">
          <a-textarea v-model:value="ebook.description" type="textarea" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>




 <script lang="ts" setup>
import axios from "axios";
import { ref, onMounted } from "vue";
import { Tool } from "@/utils/tool.js";
// 编辑相关功能
const ebook = ref();
const modalVisible = ref(false);
const modalLoading = ref(false);
//编辑
const edit = (record: any) => {
  modalVisible.value = true;
  ebook.value = Tool.copy(record);
};

const ebooks = ref(); //定义查询电子书返回集合

const loading = ref(false);
const columns = [
  {
    title: "封面",
    key: "cover",
    dataIndex: "cover",
  },
  {
    title: "名称",
    dataIndex: "name",
  },
  {
    title: "分类一",
    key: "category1Id",
    dataIndex: "category1Id",
  },
  {
    title: "分类二",
    dataIndex: "category2Id",
  },
  {
    title: "文档数",
    dataIndex: "docCount",
  },
  {
    title: "阅读数",
    dataIndex: "viewCount",
  },
  {
    title: "点赞数",
    dataIndex: "voteCount",
  },
  {
    title: "Action",
    key: "action",
    dataIndex: "action",
  },
];
onMounted(() => {
  //默认查询页码为1
  handleQuery({
    page: 1,
    size: pagination.value.pageSize,
  });
});
/*
 * 数据查询
 * */
const param = ref();
param.value = {};

//定义分页参数
const pagination = ref({
  current: 1,
  pageSize: 5,
  total: 0,
  showSizeChanger: true, // 启用每页数量选择器
  pageSizeOptions: ['5', '10', '20', '50'], // 每页展示数量的可选值
 
});

//修改查询方法 添加name参数
const handleQuery = (params: any) => {
  loading.value = true;
  axios
    .get("/ebook/list", {
      params: {
        page: pagination.value.current, // 使用 pagination 中的 current
        size: pagination.value.pageSize, // 使用 pagination 中的 pageSize
        name: param.value.name,
      },
    })
    .then((resp) => {
      loading.value = false;
      const data = resp.data;
      if (data.success) {
        ebooks.value = data.content;

        //重置分页按钮
        pagination.value.current = params.page;
        pagination.value.total = data.content.total;
      }
    });
};
/*
 * 表格点击页码时触发
 * */
const handleTableChange = (tablePagination: any) => {
  // 更新分页状态
  pagination.value.current = tablePagination.current;
  pagination.value.pageSize = tablePagination.pageSize;

  // 重新加载数据
  handleQuery();
};

const handleModalOk = () => {
  modalLoading.value = true;
  axios.post("/ebook/save", ebook.value).then((resp) => {
    //回去返回参数
    const data = resp.data;
    if (data.success) {
      modalLoading.value = false; //关闭等待
      modalVisible.value = false; //关闭对话框
      //重新加载列表
      handleQuery({
        page: pagination.value.current,
        size: pagination.value.pageSize,
      });
    }
  });
};
//新增
const add = () => {
  modalVisible.value = true;
  //清空对话框数据
  ebook.value = {};
};
//删除
const handleDelete = (id: number) => {
  axios.delete("/ebook/remove/" + id).then((resp) => {
    if (resp.data.success) {
      //重新加载列表
      handleQuery({
        page: pagination.value.current,
        size: pagination.value.pageSize,
      });
    }
  });
};
</script>
